import React, {
	Component
} from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	Tabs,
	Tools,
	TabBar,
} from 'weaver-mobile';
import {
	withRouter,
} from 'react-router-dom';
import MyAttendance from "./my/MyAttendance.js";
import Subordinate from "./subordinate/Subordinate.js";
import Sign from "../signV2/index.js";
import SignSetting from "../signV2/SignSetting.js";
import '../../style/myAttendance.less';
const getLabel = Tools.getLabel;

@withRouter
@inject('myAttendanceCopyStore')
@observer
export default class Main extends Component {
	constructor(props) {
		super(props);

		this.tabs = [{
			title: getLabel(513095, "我的考勤"),
			sub: '1'
		}, {
			title: getLabel(513282, "下属考勤"),
			sub: '2'
		}];

		this.state = {
			selectedIndex: 0
		}
	}

	componentDidMount() {
		const { callSignSetting} = this.props.myAttendanceCopyStore;
		
		callSignSetting && callSignSetting();
	}

	componentWillMount() {
		const {
			redirect
		} = this.props.myAttendanceCopyStore;

		const{match:{path},history,location:{search}} = this.props;
		
		//重定向
		if(search && search.includes('type=1')){
			history.replace('/attendanceInfo')
		}
		//我的考勤
		if(path.includes('attendanceInfo')){
			const params = {
				type:'1'
			}
			redirect(params)
		}

	}

	render() {
		const {
			myAttendanceCopyStore
		} = this.props, {
			selectedTab,
			handleTabClick,
			initialPage,
			isOnlyAttendance,
			tabBarItems
		} = myAttendanceCopyStore;

		const attendance = (
			<Tabs 
				tabs={this.tabs}
				initialPage={parseInt(initialPage)}
				swipeable={false}
				onChange={(tab, index) => handleTabClick(tab,index)}
			>
				<MyAttendance {...this.props} needInit={isOnlyAttendance || this.state.selectedIndex == 1}/>
				<Subordinate store={myAttendanceCopyStore} {...this.props}/>
			</Tabs>
		)
		
		return (
			<div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 } } className="hrm-sign-attendance">
				{
					!isOnlyAttendance ? (
						<TabBar unSelectedClassName={'unselected-tint-color'} >
							{
								tabBarItems.map((item, i) => (
									<TabBar.Item {...item} selected={this.state.selectedIndex == i} onPress={() => this.setState({selectedIndex: i})}>
										{
											i == 0 && <Sign tabBarHeight={50}/>
										}
										{
											i == 1 && attendance
										}
										{
											i == 2 && <SignSetting />
										}
									</TabBar.Item>
								))
							}
						</TabBar>
					) : <div className="hrm-only-attendance">{attendance}</div>
				}
			</div>
			
		);
	}
}